<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/html">
<head>
    <th:block th:include="include :: header('论文列表')"/>
</head>
<style>
    .track-rcol {
        width: 100%;
        max-width: 500px;
        margin: 0px auto;
        /*width: 450px;*/
        /*!*border: 1px solid #eee;*!*/
        /*margin: 20px auto;*/
        /*background: transparent;*/
        max-height: 400px;
        overflow-y: auto;
    }

    .modal-dialog.modal-right {
        width: 50%; /* 或者根据需要调整宽度 */
        max-width: 600px; /* 确保有足够的宽度 */
    }

    .del-link-button {
        background: none;
        border: none;
        color: #ff0000;
        cursor: pointer;
        font-size: inherit;
    }

    .modal-right {
        position: fixed;
        right: 0;
        margin: 0;
        height: 100%;
        display: flex;
        align-items: stretch;
    }

    .modal-right .modal-content {
        height: 100%;
        width: 100%;
    }

    .modal-right .but {
        position: absolute;
        right: 2%;
        bottom: 1.3%;
        background: red;
        color: white;
        border: none;
        border-radius: 4px;
    }

    .progress_inner {
        height: 80px;
        width: 100%;
        position: relative;
    }

    .progress_inner__step {
        width: 33.33%;
        font-size: 12px;
        padding: 0 5px;
        transition: all 0.4s;
        float: left;
        text-align: center;
        position: relative;
    }

    .progress_inner__step label {
        padding-top: 30px;
        display: block;
        position: relative;
        cursor: pointer;
    }

    .progress_inner__step:before {
        content: "1";
        width: 24px;
        height: 24px;
        color: #2196F3;
        background: white;
        line-height: 22px;
        border: 2px solid #2196F3;
        font-size: 12px;
        top: 0;
        border-radius: 50%;
        transition: all 0.4s;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        font-weight: bold;
        z-index: 11;
    }

    .progress_inner__step:nth-of-type(2):before {
        content: "2";
        color: #9E9E9E;
        border-color: #9E9E9E;
    }

    .progress_inner__step:nth-of-type(3):before {
        content: "3";
        color: #9E9E9E;
        border-color: #9E9E9E;
    }

    .progress_inner__step.completed:before {
        content: "✓";
        color: #4CAF50;
        border-color: #4CAF50;
        line-height: 22px;
        font-size: 14px;
    }

    .progress_inner__step.active:before {
        color: #2196F3;
        border-color: #2196F3;
        background: white;
    }

    .progress_inner__step.pending:before {
        color: #9E9E9E;
        border-color: #9E9E9E;
        background: white;
    }

    .progress_inner__bar {
        height: 3px;
        left: 16.665%;
        right: 16.665%;
        background: #E0E0E0;
        position: absolute;
        top: 12px;
        z-index: -1;
        border-radius: 3px;
        overflow: hidden;
    }

    .progress_inner__bar--progress {
        height: 100%;
        background: #4CAF50;
        width: 0;
        transition: width 0.6s ease;
    }

    /* 分段高亮连接线 */
    .progress_inner__bar .segment {
        position: absolute;
        height: 100%;
        width: 50%;
        background: transparent;
        transition: background 0.4s ease;
    }

    .progress_inner__bar .segment.first {
        left: 0;
    }

    .progress_inner__bar .segment.second {
        right: 0;
    }

    .progress_inner__bar .segment.highlight {
        background: #4CAF50;
        box-shadow: 0 0 8px rgba(10, 225, 19, 0.7);
    }

    .status-text {
        color: #9E9E9E;
        font-weight: normal;
        transition: all 0.4s;
        font-size: 12px;
    }

    .status-text.active {
        color: #2196F3;
        font-weight: bold;
    }

    .status-text.completed {
        color: #4CAF50;
        font-weight: bold;
    }


    button {
        background: #2196F3;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 3px;
        margin: 0 8px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s;
        font-size: 12px;
    }

    button:hover {
        background: #1976D2;
    }

    button:last-child {
        background: #9E9E9E;
    }

    button:last-child:hover {
        background: #757575;
    }

    /* 新增的流程记录样式 */
    .timeline-title {
        font-weight: bold;
        font-size: 14px;
        color: #333;
        text-align: left;
        margin: 0 0 25px 20px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        padding-bottom: 15px;
    }

    .timeline-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0.5px;
        background: linear-gradient(to right,
        rgba(224, 224, 224, 0.8),
        rgba(224, 224, 224, 0.8),
        rgba(224, 224, 224, 0.8)); /* 添加透明度使线条更柔和 */
        box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.07);
    }


    .track-list {
        margin: 20px;
        padding-left: 5px;
        position: relative;
    }

    .track-list ul {
        padding-left: 0;
    }

    .track-list li {
        position: relative;
        padding: 5px 0 10px 25px;
        line-height: 1.4;
        border-left: 2px solid #d9d9d9;
        color: #666;
        list-style: none;
        transition: all 0.4s ease; /* 添加过渡效果 */
    }

    .track-list li.first {
        color: #666;
        padding-top: 0;
    }

    .track-list li .node-icon {
        position: absolute;
        left: -7px;
        top: 18px;
        width: 8px; /* 调圆点*/
        height: 8px;
        background: #C0C0C0;
        border-radius: 50%;
        transition: all 0.4s ease; /* 添加过渡效果 */
        border: 2px solid #E0E0E0;
        box-sizing: content-box;
    }

    .track-list li.first .node-icon {
        background: #C0C0C0; /* 天蓝色 */
        width: 8px;
        height: 8px;
        left: -8px;
    }

    .track-list li .time {
        display: block;
        margin-bottom: 3px;
        font-size: 11px;
        color: #888;
        transition: all 0.4s ease; /* 添加过渡效果 */
    }

    .track-list li .txt {
        display: block;
        font-size: 12px;
        transition: all 0.4s ease; /* 添加过渡效果 */
    }

    /* 悬停效果 */
    .track-list li:hover {
        color: #333;
    }

    .track-list li:hover .node-icon {
        transform: scale(1.3);
        background: #ed8088;
    }

    .track-list li:hover .time {
        color: #666;
    }

    /* 新增审核状态样式 */
    .approve-status {
        margin-top: 10px;
        text-align: center;
    }

    .approve-status label {
        margin: 0 10px;
        cursor: pointer;
    }

    .approve-status input {
        margin-right: 5px;
    }
</style>
<div class="wrapper wrapper-content fadeInRight" style="position: absolute; left: -9999px;">
    <div class="row">
        <div class="col-sm-4">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="modal inmodal" id="myModal1111" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-right">
                            <div class="modal-content animated bounceInRight">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                                            class="sr-only">关闭</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <!-- 流程记录标题 - 放在左上角 -->
                                    <div class="timeline-title">流程记录</div>

                                    <!-- 原有的流程进度条部分 -->
                                    <div>
                                        <div class='progress_inner'>
                                            <div class='progress_inner__step active' id='step-1'>
                                                <label for='step-1'><span
                                                        class="status-text active">待提交</span></label>
                                            </div>
                                            <div class='progress_inner__step pending' id='step-2'>
                                                <label for='step-2'><span class="status-text">待审核</span></label>
                                            </div>
                                            <div class='progress_inner__step pending' id='step-3'>
                                                <label for='step-3'><span class="status-text">已完成</span></label>
                                            </div>
                                            <div class='progress_inner__bar' style="z-index: 10">
                                                <div class='progress_inner__bar--progress' id='progress-bar'></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 流程记录内容 - 放在流程图下方 -->
                                    <div class="track-rcol">
                                        <div class="track-list">
                                            <ul id="event-list">
                                                <li class="first">
                                                    <i class="node-icon"></i>
                                                    <span class="time" id="current-time"></span>
                                                    <span class="txt" id="current"></span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-white but" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <!--    <div class="col-sm-12 search-collapse" shiro:hasPermission="system:paper:chaxun">-->
        <!--      <form id="formId">-->
        <!--        <div class="select-list" >-->
        <!--          <ul>-->
        <!--            <li>-->
        <!--              <label>学院：</label>-->
        <!--              <input type="text" name="college"/>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <label>教师姓名：</label>-->
        <!--              <input type="text" name="teacherName"/>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <label>教研室：</label>-->
        <!--              <input type="text" name="roleName"/>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
        <!--              <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
        <!--            </li>-->
        <!--          </ul>-->
        <!--        </div>-->
        <!--      </form>-->
        <!--    </div>-->

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="system:paper:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <!--                <a class="btn btn-primary single disabled" onclick="$.operate.editTab()" shiro:hasPermission="system:paper:edit">-->
            <!--                    <i class="fa fa-edit"></i> 修改-->
            <!--                </a>-->
            <!--                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:paper:remove">-->
            <!--                    <i class="fa fa-remove"></i> 删除-->
            <!--                </a>-->
<!--            <a class="btn btn-warning" onclick="exportExcel('formId',ListRowId)"-->
<!--               shiro:hasPermission="system:paper:export">-->
<!--                <i class="fa fa-download"></i> 导出-->
<!--            </a>-->
            <div style="display: flex; align-items: center; gap: 15px; background: #f8f9fa; padding: 6px 12px; border-radius: 4px;">
                <th:block th:replace="include :: status-circles"/>
            </div>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>

<!-- 模态框移到这里 -->
<div class="modal inmodal" id="myModal1111" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-right">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 流程记录标题 - 放在左上角 -->
                <div class="timeline-title">流程记录</div>

                <!-- 原有的流程进度条部分 -->
                <div>
                    <div class='progress_inner'>
                        <div class='progress_inner__step active' id='step-1'>
                            <label for='step-1'><span class="status-text active">待提交</span></label>
                        </div>
                        <div class='progress_inner__step pending' id='step-2'>
                            <label for='step-2'><span class="status-text">待审核</span></label>
                        </div>
                        <div class='progress_inner__step pending' id='step-3'>
                            <label for='step-3'><span class="status-text">已完成</span></label>
                        </div>
                        <div class='progress_inner__bar' style="z-index: 10">
                            <div class='progress_inner__bar--progress' id='progress-bar'></div>
                        </div>
                    </div>
                </div>

                <!-- 流程记录内容 - 放在流程图下方 -->
                <div class="track-rcol">
                    <div class="track-list">
                        <ul id="event-list">
                            <li class="first">
                                <i class="node-icon"></i>
                                <span class="time" id="current-time"></span>
                                <span class="txt" id="current"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white but" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:paper:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:paper:remove')}]];
    var editInfo = [[${@permission.hasPermi('system:paper:info')}]];
    var revokeInfo = [[${@permission.hasPermi('system:paper:revoke')}]];
    var XYPYFlag = [[${@permission.hasPermi('system:paper:xypy')}]];
    var KYPYFlag = [[${@permission.hasPermi('system:paper:kypy')}]];

    var proFlag = [[${@permission.hasPermi('system:paper:process')}]];
    var XyRevoke = [[${@permission.hasPermi('system:paper:xyrevoke')}]];
    var KyRevoke = [[${@permission.hasPermi('system:paper:kyrevoke')}]];
    var QWERDates = [[${@dict.getType('sci_paper_qwer')}]];

    var PaperDates = [[${@dict.getType('sci_paper_ar')}]];
    var KDates = [[${@dict.getType('sci_paper_k')}]];

    var prefix = ctx + "system/paper";


    var rowSelected = $("#bootstrap-table").bootstrapTable('getSelections');
    console.log(rowSelected);
    var ListRowId = [];

    function getUrl() {
        var year = localStorage.getItem("year");
        return prefix + "/list/?year=" + year;
    }

    function initTable(options) {
        options.url = getUrl();
        $.table.init(options);
    }

    $(function () {
        var options = {
            // url:getUrl($('table').attr('id')),
            createUrl: prefix + "/add",
            detailUrl: prefix + "/detail/{id}",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "论文",
            clickToSelect: true,
            rowStyle: rowStyle0,
            pagination: true,
            pageSize: 10,
            onCheck: function (row) {
                ListRowId.push(row.id);
                console.log(ListRowId);
            },
            onUncheck: function (row) {
                var index = ListRowId.indexOf(row.id);
                if (index > -1) {
                    ListRowId.splice(index, 1);
                }
                console.log(ListRowId);
            },
            columns: [
                //   {
                //   checkbox: false,
                // },
                {
                    field: 'number',
                    title: '序号',
                    width: 5,
                    align: 'center',
                    switchable: false,
                    formatter: function (value, row, index) {
                        //return index+1; //序号正序排序从1开始

                        //通过表的#id 可以得到每页多少条
                        var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                        //通过表的#id 可以得到当前第几页
                        var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                        //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },
                {
                    field: 'id',
                    title: 'id',
                    visible: false
                },
                {
                    field: 'college',
                    title: '学院',
                },
                {
                    field: 'researchRoom',
                    title: '专业',
                    visible: false
                },
                // {
                //     field: 'teacherName',
                //     title: '录入教师',
                //     align: 'center',
                // },
                {
                    field: 'firstAuthorName',
                    title: '一作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (row.firstAuthorName == null) {
                            return "其他";
                        } else {
                            return row.firstAuthorName;
                        }
                    }
                },
                {
                    field: 'secondAuthorName',
                    title: '二作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (row.secondAuthorName == null) {
                            return "其他";
                        } else {
                            return row.secondAuthorName;
                        }
                    }
                },
                {
                    field: 'thirdAuthorName',
                    title: '三作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (row.thirdAuthorName == null) {
                            return "其他";
                        } else {
                            return row.thirdAuthorName;
                        }
                    }
                },
                {
                    field: 'fourthAuthorName',
                    title: '四作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (row.fourthAuthorName == null) {
                            return "其他";
                        } else {
                            return row.fourthAuthorName;
                        }
                    }
                },
                {
                    field: 'correspondingAuthorName',
                    title: '通讯作者',
                    align: 'center',
                    formatter:function(value,row,index){
                        if (row.correspondingAuthorName==null){
                            return "其他";
                        }else{
                            return row.correspondingAuthorName;
                        }
                    }
                },

                {
                    field: 'paperTitle',
                    title: '论文名称',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (!value) return ''; // 处理空值情况

                        // 如果长度超过指定字符数（例如20个字符），则截取并添加省略号
                        const maxLength = 20;
                        if (value.length > maxLength) {
                            return '<span title="' + value + '">' + value.substring(0, maxLength) + '...</span>';
                        }
                        return value;
                    }
                },
                {
                    field: 'paperCategory',
                    title: '论文类别',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(KDates, value);
                    }
                },
                {
                    field: 'publishedJournal',
                    title: '发表期刊',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (!value) return ''; // 处理空值情况

                        // 如果长度超过指定字符数（例如20个字符），则截取并添加省略号
                        const maxLength = 20;
                        if (value.length > maxLength) {
                            return '<span title="' + value + '">' + value.substring(0, maxLength) + '...</span>';
                        }
                        return value;
                    }
                },
                {
                    field: 'inclusionStatus',
                    title: '收录情况',
                    align: 'center',
                    visible: false,
                },
                {
                    field: 'search_web',
                    title: '收录网站',
                    align: 'center',
                    visible: false,
                },
                {
                    field: 'publicationTime',
                    title: '发表时间',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var date = new Date(value);
                        var year = date.getFullYear();
                        var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以要加1
                        var day = date.getDate().toString().padStart(2, '0');
                        return year + '-' + month + '-' + day;
                    }
                },
                {
                    field: 'isIndustryCollaborative',
                    title: '是否与行业联合发表',
                    align: 'center',
                    visible: false,
                },
                {
                    field: 'isLocalCollaborative',
                    title: '是否与地方联合发表',
                    align: 'center',
                    visible: false,
                },
                {
                    field: 'isInternationalCollaborative',
                    title: '是否与国际联合发表',
                    align: 'center',
                    visible: false,
                },
                {
                    field: 'isCrossDiscipline',
                    title: '是否是跨学科论文',
                    align: 'center',
                    visible: false,
                },
                // {
                //   field: 'paperRanking',
                //   title: '作者排名',
                //   formatter: function(value, row, index) {
                //     console.log( $.table.selectDictLabels(QWERDates, value))
                //     return $.table.selectDictLabel(QWERDates, value);
                //   }
                // },
                // {
                //   field: 'researchScore',
                //   title: '积分',
                //   formatter: function (value, row, index) {
                //     console.log("row=",row)
                //       return row.firstPersonId == row.uid ?row.firstAuthorScore :row.secondPersonId == row.uid ? row.secondAuthorScore :row.thirdPersonId == row.uid ? row.thirdAuthorScore :row.fourthPersonId == row.uid ? row.fourthAuthorScore :row.communicationAuthorId == row.uid ? row.correspondingAuthorScore :"非作者";
                //       // if (row.first_author_id == row.uid) {
                //     //   return row.researchScore;
                //     // } else {
                //     //   return 0;
                //     // }
                //   }
                // },
                {
                    title: '操作',
                    align: 'center',
                    width: '150px',
                    formatter: function (value, row, index) {
                        // console.log("row.roleId:",row.roleId)
                        // console.log("row.rolekey:",row.rolekey)
                        //
                        // console.log("row.state:",row.state)
                        // console.log("row.userId:",row.userId) // 角色自己ID
                        // console.log("row.uid:",row.uid) //登录人的ID

                        // $(document).ready(function () {
                        //   // 点击按钮时显示模态框
                        //   $('#showModalButton').on('click', function () {
                        //     $('#myModal1111').modal('show'); // 使用 Bootstrap 的 modal 方法显示模态框
                        //   });
                        // });
                        var actions = [];
                        actions.push('<a  class="link-button' + '" href="#" data-toggle="modal" data-target="#myModal1111" data-toggle="modal" data-target="#myModal1111" onclick="viewProcess(' + row.id + ', ' + row.state + ')"></i>查看流程</a><br>');
                        actions.push('<a class="link-button' + '" href="#" onclick="$.operate.detailTab(\'' + row.id + '/chakan\')"></i>查看</a>&nbsp;&nbsp;&nbsp;');
                        if (row.state == 99 && row.uid == row.userId) {
                            actions.push('<a class="link-button' + '" href="#" onclick="pushTh(\'' + row.id + '\')"></i>提交</a><br>');
                            actions.push('<a class="del-link-button' + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"></i>删除</a>&nbsp;&nbsp;&nbsp;');
                            actions.push('<a class="link-button' + '" href="#" onclick="$.operate.editTab(\'' + row.id + '\')"></i>编辑</a>&nbsp;&nbsp;&nbsp;');
                        }
                        if (row.state == 1) { // 待处理
                            if (row.deptNamekey === '1') {// 是自己教研室的
                                actions.push('<a class="link-button' + '" href="#" onclick="$.operate.detailTab(\'' + row.id + '/pro\')"></i>教研室批阅</a>');
                            }
                        } else if (row.state == 2) { // 教研室通过
                            if (row.deptNamekey === '1') {// 是自己教研室的
                                actions.push('<a class="del-link-button' + '" href="#" onclick="$.operate.detailTab(\'' + row.id + '/proth\')"></i>撤回</a><br>');
                            }
                        } else if (((row.state == 3 || row.state == 7 || row.state == 5)) && (row.uid == row.userId)) { //被退回
                            actions.push('<a class="link-button' + '" href="#" onclick="$.operate.editTab(\'' + row.id + '\')"></i>编辑</a><br>');
                            actions.push('<a class="link-button' + '" href="#" onclick="pushTh(\'' + row.id + '\')"></i>提交</a><br>');
                        } else if (row.state == 4) { // 学院通过

                        } else if (row.state == 8) { // 完成

                        }
                        return actions.join('');
                    }
                }]
        };

        initTable(options);

        window.addEventListener("storage", function (event) {
            if (event.key === "year") {
                $('#bootstrap-table').bootstrapTable("destroy")
                initTable(options);
            }
        })
    });


</script>
<script>  function pushTh(id) {
    $.modal.confirm("确认要提交吗?", function () {
        var url = prefix + "/tj/" + id;
        $.ajax({
            url: prefix + "/tj/" + id,
            type: "post",
            success: function (data) {
                //alert("提交成功")
                $("#bootstrap-table").bootstrapTable('refresh');
            }
        })
    });
}

function exportExcel(formId, ListRowId) {
    console.log('typeof formId:', typeof formId);
    table.set();
    $.modal.confirm("确定导出" + table.options.modalName + "吗？", function () {
        var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
        var params = $("#" + table.options.id).bootstrapTable('getOptions');
        var dataParam = $("#" + currentId).serializeArray();
        dataParam.push({"name": "orderByColumn", "value": params.sortName});
        dataParam.push({"name": "isAsc", "value": params.sortOrder});
        console.log("dataParam:1:", dataParam);
        // 添加选中行的ID到参数中
        if (ListRowId.length > 0) {
            dataParam.push({"name": "ListRowId", "value": ListRowId.join(',')});
        }
        $.modal.loading("正在导出数据，请稍候...");
        $.post(table.options.exportUrl, dataParam, function (result) {
            if (result.code == web_status.SUCCESS) {
                window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
            } else if (result.code == web_status.WARNING) {
                $.modal.alertWarning(result.msg)
            } else {
                $.modal.alertError(result.msg);
            }
            $.modal.closeLoading();
        });
    });
}

function viewProcess(Id, state) {
    updateProgress(state); // 更新进度条
    $.ajax({
        url: prefix + '/bhxs/' + Id,
        method: 'POST',
        data: {kid: Id},
        success: function (response) {
            const eventList = document.getElementById('event-list');
            eventList.innerHTML = '';

            response.rows.forEach(function (row) {
                const li = document.createElement('li');
                li.innerHTML = '<i class="node-icon"></i>' +
                    '<span class="time">' + row.create_time + '</span>' +
                    '<span class="txt">' + row.uname + row.state + '</span>';
                eventList.insertBefore(li, eventList.firstChild);
            });
        },
        error: function () {
            alert('无法获取批阅记录');
        }
    });
}

//显示模态框上面的进度
function updateProgress(state) {
    // 获取所有步骤元素
    const steps = document.querySelectorAll('.progress_inner__step');
    const progressBar = document.querySelector('.progress_inner__bar--progress');

    // 遍历所有步骤，重置样式
    steps.forEach(step => {
        step.classList.remove('active', 'completed', 'pending');
        step.querySelector('.status-text').classList.remove('active', 'completed');
    });
    // 重置进度条
    progressBar.style.width = '0';

    // 根据 state 设置相应的步骤颜色
    if ([99].includes(state)) {
        document.getElementById('step-1').classList.add('active');
        document.getElementById('step-1').querySelector('.status-text').classList.add('active');
        progressBar.style.width = '0';
    } else if (state === 8) {
        document.getElementById('step-1').classList.add('completed');
        document.getElementById('step-1').querySelector('.status-text').classList.add('completed');
        document.getElementById('step-2').classList.add('completed');
        document.getElementById('step-2').querySelector('.status-text').classList.add('completed');
        document.getElementById('step-3').classList.add('completed');
        document.getElementById('step-3').querySelector('.status-text').classList.add('completed');
        progressBar.style.width = '100%';
    } else if ([1, 2, 4].includes(state)) {
        document.getElementById('step-1').classList.add('completed');
        document.getElementById('step-1').querySelector('.status-text').classList.add('completed');
        document.getElementById('step-2').classList.add('completed');
        document.getElementById('step-2').querySelector('.status-text').classList.add('completed');
        progressBar.style.width = '50%';
    } else {
        // 默认情况下，所有步骤为灰色
        steps.forEach(step => {
            step.classList.add('pending');
            step.querySelector('.status-text').classList.add('pending');
        });
    }
}


function rowStyle0(row, index) {
    // 定义状态值与颜色的映射关系
    const stateColorMap = {
        8: '#67c23a', // 完结 绿色
        3: '#e6a344',
        5: '#e6a344',
        7: '#e6a344',
        9: '#e6a344',
        10: '#e6a344',
        22: '#e6a344',
        44: '#e6a344',
        99: '#e6a344', // 被驳回，草稿 黄色
        1: '#2c99ff',
        2: '#2c99ff',
        4: '#2c99ff',
        6: '#2c99ff',
        11: '#2c99ff',
        33: '#2c99ff' // 审核中 蓝色
    };

    // 统一将 row.state 转换为字符串进行查找
    const state = String(row.state);

    // 根据状态值查找对应的颜色
    if (state in stateColorMap) {
        return {
            css: {color: stateColorMap[state]}
        };
    }

    // 默认样式（可自定义）
    return {
        css: {color: '#000000'} // 默认黑色
    };
}
</script>
</body>
</html>
